<template>
  <span :class="rowTextStyle()">
    {{ rowTextValue() }}
  </span>
</template>

<script>
export default {
  name: "TableRowTextColorRatio",
  props: {
    row: {
      type: Object,
      required: true,
    },
    column: {
      type: Object,
      required: true,
    },
    colorPropField: {
      required: true,
    },
  },
  methods: {
    /**
     * @feat < 数值保留 toFixedInt 位小数 >
     * @param {Number | String} num 数值
     * @param {Number} toFixedInt 精度，要保留几位小数
     * @param {String} suffix  后缀
     * @param {String} magnification  放大倍数
     */
    numToFixed({ num, toFixedInt, magnification = 1, suffix = "" }) {
      return parseFloat(num).toString() !== "NaN"
        ? `${
            Number(num * magnification).toFixed(toFixedInt) == "-0.00"
              ? "0.00"
              : Number(num * magnification).toFixed(toFixedInt)
          }${suffix}`
        : num || "--"
    },
    rowTextStyle() {
      if (
        this.column[this.colorPropField] &&
        this.column[this.colorPropField].toString() == "0"
      ) {
        return "textGrey"
      }
      if (this.row[this.column.prop]) {
        let flag =
          this.rowTextValue() === "0.00%" ||
          this.rowTextValue() === "0.00" ||
          this.rowTextValue() === "--"
        if (flag) {
          return "textGrey"
        } else {
          return this.row[this.column.prop] > 0 ? "textRed" : "textGreen"
        }
      }
      return ""
    },
    rowTextValue() {
      if (
        this.column[this.colorPropField] &&
        this.column[this.colorPropField].toString() == "0"
      ) {
        return this.row[this.column.prop]
      } else if (parseFloat(this.row[this.column.prop]).toString() !== "NaN") {
        return this.numToFixed({
          num: this.row[this.column.prop],
          toFixedInt: this.column.tdSlot.toFixedInt || 2,
          magnification: this.column.tdSlot.ratio,
          suffix: this.column.tdSlot.suffix,
        })
      } else {
        return "--"
      }
    },
  },
}
</script>

<style lang="less" scoped>
@import "~@/assets/styles/themeStyle.less";

.textRed {
  color: @primaryTextColor;
}

.textGreen {
  color: @primaryDropTextColor;
}
.textGrey {
  color: grey;
}
</style>
